<template>
    <div>
        <h5>我是slot-child组件</h5>
        <article>
            <header>我是header</header>
            <nav>我是nav</nav>
            <div class="content">
                <slot name="head"></slot>
                <div v-for="item in 10" :key="item">
                    <slot :data="item"></slot>
                </div>
                <slot name="foot"></slot>
            </div>
            <footer>我是footer</footer>
        </article>
    </div>
</template>
    
<script setup lang='ts'>
    // 卡槽作用域 卡槽内部数据向外传递
</script>
    
<style>
    article{
        background-color: azure;
    }
    .content {
        border: 1px solid red;
    }
</style>